<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	/*设置一个盒子的样式*/
	*{
		margin:0;
		padding:0;
	}
		.gk{
			width:600px;
			height:400px;
			border:1px solid red;
			margin:0 auto;
		}


		/*设置每个li的样式*/

		.gk ul li{
			float:left;
			width:148px;
			height:50px;
			background-color: green;
			margin:0 1px;
			list-style: none;
		}

		.gk ul li p{
			text-align: center;
			line-height: 50px;
		}

           /*设置第二个盒子的样式*/
		.box{
			width:588px;
			height: 200px;
			margin-top: 200px;
			background-color: pink;
			box-sizing: border-box;

		}


		.box ul li p{
			line-height: 200px;
			font-size: 100px;
			text-align: center;
		}





         /*设置第二个盒子中的li的隐藏和显示*/
		.box .current{
         display: block;
         /*float:left;*/
		}

		.box li{
			display: none;

		}
	</style>
</head>
<body>
  <div class="gk">
  	<ul>
  		<li class="active"><p>1</p></li>
  		<li><p>2</p></li>
  		<li><p>3</p></li>
  		<li><p>4</p></li>
  	</ul>
  	<ul class="box">
  		<li class="current" style="margin-left: 0px;width: 102%;height:100%;background-color: red;"><p style="line-height: 200px;">一</p></li>
  		<li style="margin-left: 0px;width: 102%;height:100%;background-color: red;"><p style="line-height: 200px;">二</p></li>
  		<li style="margin-left: 0px;width: 102%;height:100%;background-color: red;"><p style="line-height: 200px;">三</p></li>
  		<li style="margin-left: 0px;width: 102%;height:100%;background-color: red;"><p style="line-height: 200px;">四</p></li>
  	</ul>
  </div>
  <script src="./js/jquery.min.js"></script>
  <script type="text/javascript">
   $(function(){
   	$('.gk li').mouseenter(function(){
   		$(this).addClass('active').siblings().removeClass('active');
   		var index = $(this).index();
   		$('.box li').eq(index).addClass('current').siblings().removeClass('current');
   	})
   })
   // 这个工资已经可以了

  </script>
</body>
</html>